<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ARCH</title>
    <style>
        body {
            margin: 10px;
        }

        .arch {
            padding-bottom: 50px;
        }

        .arch-base,
        .arch-other {
            font-size: 14px;
            border: 1px dashed #666;
            margin-bottom: 15px;
            display: flex;
            flex-wrap: nowrap;
            position: relative;
            z-index: 1;
        }

        .arch-base {
            height: 360px;
        }

        .arch-other {
            height: 150px;
        }

        .arch-step {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 9;
            display: flex;
            flex-wrap: nowrap;
        }

        .arch-step span {
            font-weight: 700;
            position: absolute;
            bottom: -25px;
            z-index: 1;
        }

        .step-item1,
        .step-item2,
        .step-item3 {
            width: 35%;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .step-item2,
        .step-item3 {
            border-left: 1px dashed #666;
        }

        .arch-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            position: relative;
            z-index: 3;
        }

        .arch-item {
            margin: 10px;
            background: #ffb71c;
        }

        .item-title {
            color: #fff;
            background: #06c;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
        }

        .item-subtitle {
            width: 100%;
            line-height: 30px;
            text-align: center;
        }

        .item-content {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }

        .item-sbuContent {
            width: 100%;
            margin: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .arch-base .item-content {
            flex-wrap: wrap;
        }

        .item-content-tag {
            width: 100%;
            margin: 10px;
            padding: 0 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: #fffb81ad;
        }
    </style>
</head>

<body>

    <div class="arch">
        <div class="arch-base">
            <div class="arch-content">
                <div class="arch-item" style="width:10%">
                    <div class="item-title">路由</div>
                    <div class="item-content">
                        <div class="item-content-tag" style="height:100px;">
                            Nginx</div>
                        <div class="item-content-tag" style="height:165px;background:#77a7ff;">
                            React-Router</div>
                    </div>
                </div>
                <div class="arch-item" style="width:20%">
                    <div class="item-title">数据</div>
                    <div class="item-content">
                        <div class="item-content" style="flex-wrap:nowrap;">
                            <div class="item-content-tag" style="height:100px;background:#ff7bdc;">
                                MockJs</div>
                            <div class="item-content-tag" style="height:100px;background:#fff;">
                                Proxy</div>
                        </div>
                        <div class="item-sbuContent" style="background:#fffb81;">
                            <div class="item-subtitle">DvaJs</div>
                            <div class="item-content" style="flex-wrap:nowrap;">
                                <div class="item-content-tag" style="width:60%;height:115px;background:#ffb71c;">
                                    Redux</div>
                                <div class="item-content-tag" style="width:40%;height:115px;background:#77a7ff;">
                                    Redux-saga</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="arch-item" style="width:40%">
                    <div class="item-title">交互、视觉、体验</div>
                    <div class="item-content">
                        <div class="item-content-tag" style="width:100%;height:150px;background:#77a7ff;">
                            Ant Design Mobile</div>
                        <div class="item-content" style="flex-wrap:nowrap;">
                            <div class="item-content-tag" style="width:60%;height:115px;">PX 2 REM</div>
                            <div class="item-content-tag" style="width:40%;height:115px;background:#fff;">
                                Echarts-For-React</div>
                        </div>
                    </div>
                </div>
                <div class="arch-item" style="width:30%">
                    <div class="item-title">稳定、性能、效率</div>
                    <div class="item-content">
                        <div class="item-content" style="flex-wrap:nowrap;">
                            <div class="item-content-tag" style="width:65%;height:115px;">TypeScript</div>
                            <div class="item-content-tag" style="width:35%;height:115px;background:#ff7bdc;">
                                TsLint-React</div>
                        </div>
                        <div class="item-sbuContent" style="background:#fffb81;">
                            <div class="item-subtitle">UmiJS</div>
                            <div class="item-content" style="flex-wrap:nowrap;">
                                <div class="item-content-tag" style="width:60%;height:100px;background:#ffb71c;">
                                    Webpack Bundle Analyzer</div>
                                <div class="item-content-tag" style="width:40%;height:100px;background:#77a7ff;">
                                    SplitChunksPlugin</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="arch-other">
            <div class="arch-step">
                <div class="step-item1"><span>本地开发</span></div>
                <div class="step-item2"><span>联调测试</span></div>
                <div class="step-item3"><span>发布上线</span></div>
            </div>
            <div style="width:100%; height:100%;">
                <div class="arch-content">
                    <div class="arch-item" style="width:100%;">
                        <div class="item-title">webpack-dev-server</div>
                        <div class="item-content">
                            <div class="item-content-tag" style="width:100%;">MockJs</div>
                            <div class="item-content-tag" style="width:100%;">Proxy</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:100%; height:100%;"></div>
            <div style="width:100%; height:100%;"></div>
        </div> -->
    </div>
</body>

</html>